<template>
  <Dialog v-model="dialogVisible" title="评价方案详情" width="1000px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="方案名称">
        {{ schemeData.schemeName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="方案编码">
        {{ schemeData.schemeCode || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="职业名称">
        {{ schemeData.professionName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="技能等级">
        <el-tag>{{ getLevelName(schemeData.skillLevel) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="评价方式">
        <el-tag>{{ getMethodName(schemeData.evaluationMethod) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="schemeData.status === 1 ? 'success' : 'danger'">
          {{ schemeData.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="方案说明" :span="2">
        <div style="white-space: pre-wrap; max-height: 150px; overflow-y: auto;">
          {{ schemeData.schemeDesc || '-' }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ schemeData.createTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ schemeData.updateTime || '-' }}
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 评价环节配置 -->
    <el-divider content-position="left">评价环节</el-divider>
    <el-table :data="schemeData.stageList || []" border style="width: 100%">
      <el-table-column prop="stageName" label="环节名称" width="150" />
      <el-table-column prop="stageType" label="环节类型" width="120">
        <template #default="{ row }">
          <el-tag>{{ getStageTypeName(row.stageType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长(分钟)" width="100" />
      <el-table-column prop="totalScore" label="总分" width="80" />
      <el-table-column prop="passScore" label="及格分" width="80" />
      <el-table-column prop="weight" label="权重" width="80">
        <template #default="{ row }">{{ row.weight }}%</template>
      </el-table-column>
      <el-table-column prop="stageDesc" label="说明" />
    </el-table>
    
    <!-- 关联模板 -->
    <el-divider content-position="left">关联模板</el-divider>
    <el-table :data="schemeData.templateList || []" border style="width: 100%">
      <el-table-column prop="templateName" label="模板名称" />
      <el-table-column prop="templateType" label="模板类型" width="120">
        <template #default="{ row }">
          <el-tag>{{ getTemplateTypeName(row.templateType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isRequired" label="是否必选" width="100">
        <template #default="{ row }">
          <el-tag :type="row.isRequired === 1 ? 'success' : 'info'">
            {{ row.isRequired === 1 ? '必选' : '可选' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const schemeData = ref({} as any)

const getLevelName = (level: number) => {
  const levelMap = { 1: '初级', 2: '中级', 3: '高级', 4: '技师', 5: '高级技师' }
  return levelMap[level] || '-'
}

const getMethodName = (method: number) => {
  const methodMap = { 1: '理论+实操', 2: '仅理论', 3: '仅实操', 4: '综合评价' }
  return methodMap[method] || '-'
}

const getStageTypeName = (type: number) => {
  const typeMap = { 1: '理论考试', 2: '实操考试', 3: '面试答辩', 4: '综合评价' }
  return typeMap[type] || '-'
}

const getTemplateTypeName = (type: number) => {
  const typeMap = { 1: '理论考试', 2: '实操考试', 3: '综合评价' }
  return typeMap[type] || '-'
}

const open = (data: any) => {
  dialogVisible.value = true
  schemeData.value = data
}

defineExpose({ open })
</script> 